<template>
	<div class="edit">
		<el-dialog title="上/下架" :close-on-click-modal="false" :visible.sync="show" :fullscreen="false" width="900px"
			append-to-body>
			<div class="content" v-loading="loading">
				<el-form ref="upper-form" :model="form" :rules="formRules" label-width="120px" label-position="right">
					<el-row>
						<el-col :span="12">
							<el-form-item label="商品名称:">
								{{options.goodsName}}
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="商品分类:">
								{{options.goodsTypeName}}
							</el-form-item>
						</el-col>
					</el-row>

					<el-row v-if="!form.type.length">
						<el-col :span="24">
							<el-form-item label="上架时间:" prop="fromOnshowTime">
								<el-date-picker v-model="form.fromOnshowTime" :picker-options="pickerOptions1"
									value-format="yyyy-MM-dd" type="date" @change="form.lastOnshowTime = ''"
									placeholder="选择上架时间">
								</el-date-picker>
								<span style="margin: 0 20px;">至</span>
								<el-date-picker v-model="form.lastOnshowTime" :picker-options="pickerOptions2"
									value-format="yyyy-MM-dd" type="date" placeholder="选择下架时间">
								</el-date-picker>
								<span style="margin-left: 15px;font-size: 12px;color: red;">不选择下架时间将不会下架</span>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="24">
							<el-form-item label="是否立即下架:">
								<el-checkbox-group v-model="form.type">
									<el-checkbox label="是">是</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="24">
							<el-form-item label="备注:">
								<el-input type="textarea" v-model="form.remark" placeholder="请输入备注"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div slot="footer" v-if="!loading">
				<el-button type="primary" :loading="btnLoading" @click="onSubmit">保 存</el-button>
				<el-button @click="cencel" :disabled="btnLoading">取 消</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import {
		discountAdd,
		goodsDetail,
		goodsEdit,
		discountList,
		discountDetails,
		goodsGroundingGood
	} from "@/api/shopping/content"
	const regNumber = /^[\d|\.]*$/
	export default {
		name: 'ContentUpper',
		dicts: ['goods_discount'],
		data() {
			return {
				show: false,
				loading: false,
				btnLoading: false,
				form: {},
				formRules: {
					fromOnshowTime: {
						required: false,
						message: '请选择上架时间',
						trigger: 'blur'
					},
					discount: {
						required: true,
						trigger: 'blur',
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error('请输入折扣金额'));
							} else if (!regNumber.test(value)) {
								callback(new Error('请输入数字'));
							} else {
								callback()
							}
						}
					}
				},
				options: {},
				pickerOptions1: {
					disabledDate: (time) => {
						let date = new Date()
						let str = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`
						date = new Date(str)
						return time.getTime() < date.getTime();
					}
				},
				pickerOptions2: {
					disabledDate: (time) => {
						if (!this.form.fromOnshowTime) return true
						let date = new Date(this.form.fromOnshowTime)
						return time.getTime() < date.getTime();
					}
				}
			}
		},
		methods: {
			init(options) {
				this.options = options
				this.form = {
					fromOnshowTime: '',
					lastOnshowTime: '',
					remark: '',
					discount: '',
					type: [],
					X: '',
					N: '',
					goodsId: ''
				}
				this.resetForm('upper-form')
				this.show = true
				this.loading = true
				this.btnLoading = false
				goodsDetail(options.goodsId).then(res => {
					for (let i in this.form) {
						if (res.data[i]) this.form[i] = res.data[i]
					}

					// 优惠策略回显
					if (!res.pubGoodsDiscounts) {
						discountList({
							goodsId: options.goodsId
						}).then(sres => {
							this.form.type = sres.rows.map(item => {
								if (item.discountType == '1') {
									this.form.N = item.main
									this.form.X = item.subordinate
								}
								if (item.discountType == '3') {
									this.form.discount = item.main
								}
								return item.discountType
							})
							this.loading = false
						})
					} else {
						this.loading = false
					}
				})
			},
			cencel() {
				this.show = false
			},
			getPubGoodsDiscountList(goodsId) {
				if (!Array.isArray(this.form.type)) return []
				let arr = []
				this.form.type.forEach(item => {
					let obj = {
						discountType: '',
						goodsId,
						main: 0,
						subordinate: 0
					}
					if (item == '1') { //买n送x
						obj.main = this.form.N
						obj.subordinate = this.form.X
					}
					if (item == '3') { //折扣
						obj.main = this.form.discount
					}
					obj.discountType = item
					obj.compareType = Number(obj.main) + Number(obj.subordinate)
					arr.push(obj)
				})
				return arr
			},
			onSubmit() {
				// 暂时传这个4个字段
				this.btnLoading = true
				let form = {
					remark: this.form.remark,
					goodsId: this.form.goodsId,
					type: this.form.type[0],
					fromOnshowTime: this.form.fromOnshowTime || '',
					lastOnshowTime: this.form.lastOnshowTime || null,
				};
				if (form.type) {
					form.lastOnshowTime = this.dateFormat("YYYY-mm-dd", new Date());
				};
				delete form.type;
				this.$refs['upper-form'].validate(valid => {
					if (valid) {
						goodsGroundingGood(form).then(res => {
							this.$message.success('操作成功');
							this.$parent.getList();
							this.btnLoading = false;
							this.show = false;
						}).catch(err=>{
							this.btnLoading = false;
						})
					}else{
						this.btnLoading = false;
					}
				})
			},
			dateFormat(fmt, date) {
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString() // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
					}
				}
				return fmt;
			}

		}
	}
</script>
<style lang="scss" scoped>
	.content {
		padding-right: 50px;
	}
</style>
